<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <a-form ref="form" autocomplete="off" :model="form" layout="vertical">
            <a-form-item
              label="label"
              name="label"
              :rules="[{ required: true, message: '该字段不能为空' }]"
            >
              <a-input v-model:value="form.label" />
            </a-form-item>
            <a-form-item
              label="value"
              name="value"
              :rules="[{ required: true, message: '该字段不能为空' }]"
            >
              <a-input v-model:value="form.value" />
            </a-form-item>
            <a-form-item
              label="disabled"
              name="disabled"
              :rules="[{ required: true, message: '该字段不能为空' }]"
            >
              <a-input v-model:value="form.disabled" />
            </a-form-item>
          </a-form>
          <a-button type="primary" @click="validate">校验</a-button>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    name: 'ruleForm',
    mixins: [IndexMixin],
  });
</script>

<style lang="less" scoped>
  .content-container {
    padding: 16px;
  }
</style>
